
<template>
  <div class="box">
    <div ref="chinaMap" style="height: 100vh;width: 100%;"></div>
    <div class="box1" ref="chart1" style="height: 250px;width:300px;"></div>
    <div class="box2" ref="chart2" style="height: 300px;width:300px;"></div>
    <div class="box3" ref="chart3" style="height: 150px;width:300px;"></div>
    <div class="box4" ref="chart4" style="height: 180px;width:300px;"></div>
    <div class="box5" ref="chart5" style="height: 250px;width:300px;"></div>
    <div class="box6" style="height: 120px;width:600px;">
      <div class="one">
        <span>泊位总数</span>
        <span>10000</span>
      </div>
      <div class="two">
        <span>已占泊位数</span>
        <span>10000</span>
      </div>
      <div class="three"> <span>剩余泊位数</span>
        <span>10000</span>
      </div>
      <div class="four">
        <span>累计停车次数（辆）</span>
        <span>10000</span>
      </div>
    </div>

  </div>
</template>
    
<script setup lang="ts">
import * as echarts from 'echarts';
import chinaJSON from '@/assets/china.json'
import { onMounted, ref } from 'vue'
const chinaMap = ref()
const chart1 = ref()
const chart2 = ref()
const chart3 = ref()
const chart4 = ref()
const chart5 = ref()
onMounted(() => {
  let myChart1 = echarts.init(chart1.value);
  let myChart2 = echarts.init(chart2.value);
  let myChart3 = echarts.init(chart3.value);
  let myChart4 = echarts.init(chart4.value);
  let myChart5 = echarts.init(chart5.value);
  drawChina()
  // 南丁格尔图
  const option1 = {
    legend: {
      top: 'bottom'
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        name: '停车场位置数量分布',
        type: 'pie',
        radius: [5, 80],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: [
          { value: 40, name: '包河区' },
          { value: 38, name: '瑶海区' },
          { value: 32, name: '蜀山区' },
          { value: 30, name: '庐阳区' },
          { value: 28, name: '肥东县' },
          { value: 26, name: '肥西县' },
          { value: 22, name: '庐江县' },
          { value: 18, name: '长丰县' }
        ],

      }
    ]
  };
  const option2 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['包河区', '蜀山区', '庐江县', '庐阳区', '肥东县', '瑶海区', '肥西县']
    },
    series: [
      {
        name: '包河区',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [320, 302, 301, 334, 390, 330, 320]
      },
      {
        name: '蜀山区',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '庐江县',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '庐阳区',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [150, 212, 201, 154, 190, 330, 410]
      },
      {
        name: '肥东县',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [820, 832, 901, 934, 1290, 1330, 1320]
      }
    ]
  };
  const option3 = {
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        center: ['50%', '75%'],
        radius: '90%',
        min: 0,
        max: 1,
        splitNumber: 8,
        axisLine: {
          lineStyle: {
            width: 6,
            color: [
              [0.25, '#FF6E76'],
              [0.5, '#FDDD60'],
              [0.75, '#58D9F9'],
              [1, '#7CFFB2']
            ]
          }
        },
        pointer: {
          icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '12%',
          width: 20,
          offsetCenter: [0, '-60%'],
          itemStyle: {
            color: 'white'
          }
        },
        axisTick: {
          length: 12,
          lineStyle: {
            color: 'inherit',
            width: 2
          }
        },
        splitLine: {
          length: 20,
          lineStyle: {
            color: 'inherit',
            width: 5
          }
        },
        axisLabel: {
          color: '#fff',
          fontSize: 12,
          distance: -60,
          rotate: 'tangential',
          formatter: function (value) {
            if (value === 0.875) {
              return 'Grade A';
            } else if (value === 0.625) {
              return 'Grade B';
            } else if (value === 0.375) {
              return 'Grade C';
            } else if (value === 0.125) {
              return 'Grade D';
            }
            return '';
          }
        },
        title: {
          offsetCenter: [0, '-10%'],
          fontSize: 12
        },
        detail: {
          fontSize: 12,
          offsetCenter: [0, '-35%'],
          valueAnimation: true,
          formatter: function (value) {
            return Math.round(value * 100) + '';
          },
          color: 'inherit'
        },
        data: [
          {
            value: 0.7,
            name: 'Grade Rating'
          }
        ]
      }
    ]
  };
  const option4 = {
    title: {
      text: ''
    },
    legend: {
      data: ['Allocated Budget', 'Actual Spending']
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: 'Sales', max: 6500 },
        { name: 'Administration', max: 16000 },
        { name: 'Information Technology', max: 30000 },
        { name: 'Customer Support', max: 38000 },
        { name: 'Development', max: 52000 },
        { name: 'Marketing', max: 25000 }
      ],
      radius: 40,//缩放
      center: ['50%', '50%'],//位置

    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: 'Allocated Budget'
          },
          {
            value: [5000, 14000, 28000, 26000, 42000, 21000],
            name: 'Actual Spending'
          }
        ],
      }
    ]
  };
  const option5 = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'Line 1',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)'
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [140, 232, 101, 264, 90, 340, 250]
      },
      {
        name: 'Line 2',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(0, 221, 255)'
            },
            {
              offset: 1,
              color: 'rgb(77, 119, 255)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [120, 282, 111, 234, 220, 340, 310]
      },
      {
        name: 'Line 3',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(55, 162, 255)'
            },
            {
              offset: 1,
              color: 'rgb(116, 21, 219)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [320, 132, 201, 334, 190, 130, 220]
      },
      {
        name: 'Line 4',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(255, 0, 135)'
            },
            {
              offset: 1,
              color: 'rgb(135, 0, 157)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [220, 402, 231, 134, 190, 230, 120]
      },
      {
        name: 'Line 5',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        label: {
          show: true,
          position: 'top'
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(255, 191, 0)'
            },
            {
              offset: 1,
              color: 'rgb(224, 62, 76)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [220, 302, 181, 234, 210, 290, 150]
      }
    ]
  };
  option1 && myChart1.setOption(option1);
  option2 && myChart2.setOption(option2);
  option3 && myChart3.setOption(option3);
  option4 && myChart4.setOption(option4);
  option5 && myChart5.setOption(option5);
  window.addEventListener("resize", () => {
    myChart1.resize()
    myChart2.resize()
    myChart3.resize()
    myChart4.resize()
    myChart5.resize()

  })
})
let regions = [
  {
    name: '新疆维吾尔自治区',
    itemStyle: {
      areaColor: '#374ba4',
      opacity: 1,
    },
  },
  {
    name: '四川省',
    itemStyle: {
      areaColor: '#fe9b45',
      opacity: 1,
    },
  },
  {
    name: '陕西省',
    itemStyle: {
      areaColor: '#fd691b',
      opacity: 1,
    },
  },
  {
    name: '黑龙江省',
    itemStyle: {
      areaColor: '#ffc556',
      opacity: 1,
    },
  },
]
let scatter: any[] = [
  //  { name: '北京烤鸭', value: [116.46122, 39.97886, 9] },
  //  { name: '兰州拉面', value: [103.86615, 36.040129, 9] },
  //  { name: '新疆烤肉', value: [87.613228, 43.810394, 9] },
  //  { name: '长沙臭豆腐', value: [112.915204, 28.207735, 9] },
  //  { name: '西安肉夹馍', value: [108.953445, 34.288842, 9] },
  //  { name: '云南', value: [102.710002, 25.045806, 9] },
]
function drawChina() {
  var myChart = echarts.init(chinaMap.value)
  echarts.registerMap('china', chinaJSON) //注册可用的地图
  var option = {
    geo: {
      map: 'china',
      roam: true, //是否允许缩放，拖拽
      zoom: 0.8, //初始化大小
      //缩放大小限制
      scaleLimit: {
        min: 0.8, //最小
        max: 2, //最大
      },
      //设置中心点
      center: [108, 22],
      //省份地图添加背景
      regions: regions,
      itemStyle: {
        areaColor: '#0b122e',
        color: 'red',
        borderColor: '#232652',
        borderWidth: 2,
      },
      //高亮状态
      emphasis: {
        itemStyle: {
          areaColor: '#1af9e5',
          color: '#fff',
        },
      },
    },
    //配置属性
    series: {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      data: scatter,
      showEffectOn: 'render',
      rippleEffect: {
        //涟漪特效相关配置
        brushType: 'stroke', //波纹的绘制方式，可选 'stroke' 和 'fill'
      },
      hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果
      label: {
        //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
        normal: {
          formatter: '{b}',
          position: 'right',
          show: true,
        },
      },
      itemStyle: {
        //图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时
        normal: {
          color: '#ffffff', //散点的颜色
          shadowBlur: 10,
          shadowColor: 20,
          fontSize: '12px',
        },
      },
      zlevel: 1,
    },
  }
  myChart.setOption(option)
}
</script>
    
<style scoped lang="scss">
.box {

  margin: 0px;
  background: url('../../assets/bg.webp') no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
}

.box1 {
  position: absolute;
  top: 45px;
  left: 80px;
}

.box2 {
  position: absolute;
  top: 350px;
  left: 80px;
}

.box3 {
  position: absolute;
  top: 70px;
  right: 80px;
}

.box4 {
  position: absolute;
  top: 230px;
  right: 80px;
}

.box5 {
  position: absolute;
  top: 435px;
  right: 80px;
}

.box6 {
  border: 1px solid white;
  position: absolute;
  bottom: 34px;
  left: 458px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.one {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: #fff;
}

.two {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: #fff;
}

.three {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: #fff;
}

.four {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: #fff;
}
</style>
    